<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="en">
<head >
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>${title}</title>
    <meta name="keywords" content="${keywords}">
    <meta name="description" content="${description}">

    <link rel="stylesheet" href="/common/bootstrap/css/bootstrap.css?VERSION=0.01">
    <link rel="stylesheet" href="/assets/2.0/css/common.css?VERSION=0.01">
    <link rel="stylesheet" href="/assets/2.0/css/solution.css?VERSION=0.01">
    <link rel="stylesheet" href="/assets/2.0/css/price.css?VERSION=0.01">
    <link rel="stylesheet" href="/assets/2.0/css/case/case.css?VERSION=0.01">
    <style>
        .case-left{
        }
    </style>
<body>
<!--页头-->
<jsp:include page="../include/index_header.jsp"></jsp:include>
<div class="section pt-all " >
    <input type="hidden" id="printType" value="${printType}">
    <input type="hidden" id="palm" value="${palm}">
    <input type="hidden" id="batchManufacturing" value="${batchManufacturing}">
    <input type="hidden" id="laserManufacturing" value="${laserManufacturing}">
    <div style="width: 100%;background-color: #fff;">
        <div class="content-w  clearfix cases">
            <div class="fl case-left">
                <div class="craft  nav1 ">
                    <ul id="accordion" class="accordion">
                        <li <c:if test="${openIndex == 1}">class="default open"</c:if> >
                            <div class="link" style="margin-top: 0;">3D 打 印<i class="fa glyphicon glyphicon-chevron-right"></i></div>
                            <ul class="submenu">
                                <li><a <c:if test="${printType == 'SLA(树脂)打印'}">class="active"</c:if> onclick="location='/case/sla.html'">SLA(树脂)打印</a></li>
                                <li><a <c:if test="${printType == 'SLS(尼龙/玻纤)打印'}">class="active"</c:if> onclick="location='/case/sls.html'">SLS(尼龙/玻纤)打印</a></li>
                                <li><a <c:if test="${printType == 'SLM(金属)打印'}">class="active"</c:if> onclick="location='/case/slm.html'">SLM(金属)打印</a></li>
                                <li><a <c:if test="${printType == '陶瓷打印'}">class="active"</c:if> onclick="location='/case/ceramics.html'">陶瓷打印</a></li>
                            </ul>
                        </li>
                        <li <c:if test="${openIndex == 2}">class="default open"</c:if> >
                            <div class="link">手 板 制 作<i class="fa glyphicon glyphicon-chevron-right"></i></div>
                            <ul class="submenu">
                                <li><a <c:if test="${palm == '3D打印手板'}">class="active"</c:if> onclick="location='/case/3DPrintPalm.html'">3D打印手板</a></li>
                                <li><a <c:if test="${palm == 'CNC手板'}">class="active"</c:if> onclick="location='/case/cncPalm.html'">CNC手板</a></li>
                            </ul>
                        </li>
                        <li <c:if test="${openIndex == 3}">class="default open"</c:if> >
                            <div class="link">批 量 制 造<i class="fa glyphicon glyphicon-chevron-right"></i></div>
                            <ul class="submenu">
                                <li><a <c:if test="${batchManufacturing == '硅胶覆膜'}">class="active"</c:if> onclick="location='/case/silicone.html'">硅胶覆膜</a></li>
                                <li><a <c:if test="${batchManufacturing == '注塑模具'}">class="active"</c:if> onclick="location='/case/injectionMolding.html'">注塑模具</a></li>
                                <li><a <c:if test="${batchManufacturing == '碳纤维加工'}">class="active"</c:if> onclick="location='/case/carbon.html'">碳纤维加工</a></li>
                                <li><a <c:if test="${batchManufacturing == '小批量制造'}">class="active"</c:if> onclick="location='/case/small-lot-manufacturinig.html'">小批量制造</a></li>
                            </ul>
                        </li>
                        <li <c:if test="${openIndex == 4}">class="default open"</c:if> >
                            <div class="link">激 光 制 造<i class="fa glyphicon glyphicon-chevron-right"></i></div>
                            <ul class="submenu">
                                <li><a <c:if test="${laserManufacturing == '激光钢网'}">class="active"</c:if> onclick="location='/case/steel-mesh.html'">激光钢网</a></li>
                                <li><a <c:if test="${laserManufacturing == '柔性线路板激光成型'}">class="active"</c:if> onclick="location='/case/circuit.html'">柔性线路板激光成型</a></li>
                                <li><a <c:if test="${laserManufacturing == '激光精密钻孔'}">class="active"</c:if> onclick="location='/case/hole.html'">激光精密钻孔</a></li>
                                <li><a <c:if test="${laserManufacturing == '激光三维电路'}">class="active"</c:if> onclick="location='/case/steel-laser.html'">激光三维电路</a></li>
                                <li><a <c:if test="${laserManufacturing == '精密部件个性化定制'}">class="active"</c:if> onclick="location='/case/metal.html'">精密部件个性化定制</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div class=" right-material  fr ">
                <div class="case-content">
                    <div class="list-header clearfix">
                        <div class="list-header-nav text-left fl">
                            <span>
                                案例展示
                            </span>
                        </div>
                        <div class="search text-right fr">
                            <span> 当前位置: </span>
                            <a href="/"> 首页 > </a>
                            <span> 案例展示 </span>
                        </div>
                    </div>
                    <div id="caseIndex2">
                        <c:choose>
                            <c:when test="${empty casePage.records}">
                                <h4 style="text-align: center">暂无相关案例，敬请期待...</h4>
                            </c:when>
                            <c:otherwise>
                                <c:forEach var="cases" items="${casePage.records}">
                                    <div class="list-column clearfix">
                                        <div class="left-cell">
                                            <a href='/case/${cases.id}.html' target="_blank">
                                                <img  src="${cases.thumbnailUrl}" alt="news" >
                                            </a>
                                        </div>
                                        <div class="right-cell">
                                            <a href='/case/${cases.id}.html' target="_blank" class="right-title">${cases.title}</a>
                                            <p class="right-content">${cases.sketch}</p>
                                            <p class="detail clearfix"> <span class="fl"> <em class="glyphicon glyphicon-time"></em> ${cases.created}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;人气：${cases.viewCount}</span><a href='/case/${cases.id}.html' target="_blank" class="fr">查看详情 > </a></p>
                                        </div>
                                    </div>
                                </c:forEach>
                            </c:otherwise>
                        </c:choose>
                        <div id="layPage" aria-label="Page navigation" class="nav text-center" style="user-select: none;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<jsp:include page="../include/index_footer.jsp"></jsp:include>
</body>
<script src="/common/bootstrap/js/bootstrap.js?VERSION=0.01"></script>
<script src="/assets/2.0/js/index.js?VERSION=0.01"></script>
<script>
    var url = window.location.href;
    url = url.substring(0,url.indexOf(".html")+5);
    layui.use(['laypage', 'layer'], function(){
        var laypage2 = layui.laypage;
        laypage2.render({
            elem: 'layPage',
            theme: '#f2c41f',
            count: ${casePage.total},
            limit : ${casePage.size},
            curr : ${casePage.current},
            jump: function(obj, first){
                if(!first){
                    location.href = url+'?size=10&current='+obj.curr;
                }
            }
        });
    });

    var Accordion = function(el, multiple) {
        this.el = el || {};
        this.multiple = multiple || false;

        // Variables privadas
        var links = this.el.find('.link');
        // Evento
        links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
    }
    //为手风琴Accordion添加下拉菜单事件：
    Accordion.prototype.dropdown = function(e) {
        var $el = e.data.el;
        $this = $(this),
        $next = $this.next();
        $next.slideToggle();
        $this.parent().toggleClass('open');
        if (!e.data.multiple) {
            $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
        };
    }
    //然后可以通过下面语句调用手风琴下拉菜单：
    var accordion = new Accordion($('#accordion'), false);

</script>
</html>